<template>
  <div class="studio">
    <StudioHeader class="navbar" />
    <div class="main-content">
      <studio-side-menu class="studio-side-menu-box" />
      <router-view
        v-show="visualizationMode !== 'preview'"
        class="studio-view"
      />
    </div>

    <div v-if="visualizationMode === 'preview'" class="preview-view">
      <preview-view />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

import StudioHeader from '@/components/studio/StudioHeader.vue'
import StudioSideMenu from '@/components/studio/StudioSideMenu.vue'
import ProjectStore, { Project } from '@/store/modules/project'
import VisualizationStore from '@/store/modules/visualization'
import PreviewView from '@/views/studio/PreviewView.vue'

@Component({
  components: {
    StudioHeader,
    StudioSideMenu,
    PreviewView,
  },
})
export default class StudioView extends Vue {
  public projectLoaded = false

  public async created(): Promise<void> {
    await ProjectStore.queryProjectById(this.$route.params.id)
    this.projectLoaded = true
  }

  public get project(): Project | null {
    return ProjectStore.activeProject
  }

  public get visualizationMode(): string {
    return VisualizationStore.visualizationMode
  }
}
</script>

<style lang="less" scoped>
@import '@/constants';

.studio {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative;
  width: 100vw;

  .main-content {
    display: flex;
    height: calc(100vh - @HEADER_HEIGHT);
  }

  // .navbar {
  //   flex: 0 0;
  // }

  .studio-view {
    flex: 1;
    overflow: hidden;
    // flex: 1 1;
  }

  .preview-view {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
  }
}
</style>
